1 00:00:00,650 --> 00:00:06,920 In this lecture, we're going to take a look at the GUI object class and how this class is used to create 2 00:00:06,920 --> 00:00:13,550 all sorts of different UI objects like text labels, image labels, frames, and so on. 3 00:00:13,580 --> 00:00:19,610 It states that GUI object is an abstract class for a 2D user interface object. 4 00:00:19,610 --> 00:00:25,610 It defines all the properties relating to the display of a graphical user interface object, such as 5 00:00:25,610 --> 00:00:27,470 size position. 6 00:00:27,500 --> 00:00:34,220 It also has some useful read only properties like absolute position, absolute size, and absolute rotation. 7 00:00:34,220 --> 00:00:38,180 It should be noted that GUI object can have negative sizes and render. 8 00:00:38,180 --> 00:00:43,940 Normally, though GUI objects anchor point ought to be used to better control rendering. 9 00:00:44,300 --> 00:00:50,720 So this is the base class that is inherited by other 2D objects in our game, such as text labels, 10 00:00:50,720 --> 00:00:52,220 frames, image labels. 11 00:00:52,220 --> 00:00:56,270 And we're going to go ahead and take a look at those inside of studio. 12 00:00:56,270 --> 00:01:00,530 Let me go ahead and create a new screen GUI inside of the starter GUI. 13 00:01:00,530 --> 00:01:04,400 And let's go ahead and first take a look at the frame instance. 14 00:01:04,400 --> 00:01:07,970 So this is a 2D object that will display on your screen. 15 00:01:07,970 --> 00:01:11,540 And this frame is just a solid color on the screen. 16 00:01:11,540 --> 00:01:17,270 We are able to resize the frame to whatever size we want, and we can change the color and some other 17 00:01:17,270 --> 00:01:18,680 properties inside of it. 18 00:01:18,740 --> 00:01:23,000 If we go ahead and take a look at the properties panel, there's some settings for us to adjust, such 19 00:01:23,000 --> 00:01:24,950 as the background color for the frame. 20 00:01:24,950 --> 00:01:28,010 So I'm able to change the background color to whatever I want. 21 00:01:28,040 --> 00:01:30,080 Maybe I want it to be a bright green. 22 00:01:30,080 --> 00:01:38,300 I'm able to change the anchor point, which defines the position that the GUI should reshape or scale 23 00:01:38,300 --> 00:01:38,480 at. 24 00:01:38,480 --> 00:01:42,830 So for example, the current anchor point is zero zero, which is up in this corner right here you can 25 00:01:42,830 --> 00:01:44,360 see this little black icon. 26 00:01:44,360 --> 00:01:46,040 That is the anchor point. 27 00:01:46,040 --> 00:01:51,920 And if I swap the position on the x axis to one, you'll see that my frame has shifted. 28 00:01:51,920 --> 00:01:54,080 And now the anchor point is over here. 29 00:01:54,080 --> 00:01:59,990 So this anchor point not only determines how this UI should be reshaped when the screen is scaled, 30 00:01:59,990 --> 00:02:03,800 but it also determines the position of our UI. 31 00:02:03,800 --> 00:02:12,560 So right now its current position is about 44% on the x axis and 36% on the y axis. 32 00:02:12,560 --> 00:02:17,630 We are able to adjust some other properties, such as how transparent we want the background to be. 33 00:02:17,630 --> 00:02:23,480 If we want it to completely disappear, we can make it completely transparent or we can make it completely 34 00:02:23,480 --> 00:02:24,230 opaque. 35 00:02:24,230 --> 00:02:28,160 We are able to add a border around the frame and change the color as well. 36 00:02:28,160 --> 00:02:31,040 So maybe I want a white border around my frame. 37 00:02:31,040 --> 00:02:36,440 I can go ahead and make a white color, and then set the size to be something like five pixels. 38 00:02:36,440 --> 00:02:40,820 So now I have a border around my frame that is five pixels in width. 39 00:02:40,820 --> 00:02:43,970 And then I'm also able to change some other things about the border. 40 00:02:43,970 --> 00:02:47,600 For example, in what direction do I want the border to be sized? 41 00:02:47,600 --> 00:02:51,920 Currently it's set to outline, so the extent of our frame is right here. 42 00:02:51,920 --> 00:02:54,200 And then the border extends beyond that. 43 00:02:54,200 --> 00:03:00,650 But if I swap the border mode to let's say middle now what's going to happen is the border is going 44 00:03:00,650 --> 00:03:01,370 to be in the center. 45 00:03:01,370 --> 00:03:05,390 So you basically have two and a half pixels over here and two and a half pixels over here. 46 00:03:05,390 --> 00:03:11,870 But since you can't cut pixels in half, then we I think we have three pixels on this side and two pixels 47 00:03:11,870 --> 00:03:12,680 on that side. 48 00:03:12,680 --> 00:03:18,530 And then if I set the border mode to be inset, then the border is going to be on the inside rather 49 00:03:18,530 --> 00:03:21,770 than on the outside of the border of our frame. 50 00:03:22,310 --> 00:03:27,200 The layout order property has to do with some UI constraints, which we're going to take a look at in 51 00:03:27,200 --> 00:03:28,010 a future lecture. 52 00:03:28,010 --> 00:03:29,960 So we're not going to worry about this for now. 53 00:03:29,990 --> 00:03:33,770 The other thing we want to go ahead and take a look at is the size and position. 54 00:03:33,770 --> 00:03:36,650 So this stores the position of our guy. 55 00:03:36,650 --> 00:03:41,210 So as I move my guy around you can see the position updating. 56 00:03:41,210 --> 00:03:43,280 And same thing goes with the size. 57 00:03:43,580 --> 00:03:47,510 As I resize my UI you can see the size changing. 58 00:03:47,510 --> 00:03:50,390 And right now it's being stored in pixels. 59 00:03:50,390 --> 00:03:55,340 So you'll notice that there's two different values for these position and size properties. 60 00:03:55,340 --> 00:03:57,740 One is scale and one is offset. 61 00:03:57,740 --> 00:04:00,710 We're going to be talking about that more in the next lecture. 62 00:04:00,710 --> 00:04:02,750 But for now don't worry about it. 63 00:04:03,140 --> 00:04:06,590 Another property I actually want to talk about here is called automatic size. 64 00:04:06,590 --> 00:04:09,890 And this allows us to resize our UI. 65 00:04:09,890 --> 00:04:14,840 If any descendants in the frame go beyond the border of the frame. 66 00:04:14,840 --> 00:04:21,140 So for example, let me duplicate this frame and let me put it as a child of the other frame and let 67 00:04:21,140 --> 00:04:22,340 me go ahead and change the color. 68 00:04:22,340 --> 00:04:24,050 So that way we know which one is which. 69 00:04:24,050 --> 00:04:25,430 I'll make this one like a yellow. 70 00:04:25,640 --> 00:04:27,530 And then let me resize it. 71 00:04:28,210 --> 00:04:33,760 So currently this other frame is a child of my green frame, and if I move it beyond my frame, it's 72 00:04:33,760 --> 00:04:37,390 still visible on the screen and my other frame stays the same. 73 00:04:37,420 --> 00:04:44,530 Now, if I wanted to resize this frame to include or basically wrap around this other frame that has 74 00:04:44,530 --> 00:04:48,700 moved beyond its borders, then that's what we use the automatic size property for. 75 00:04:48,700 --> 00:04:52,840 So for example, if I swap it to X it kind of shifted things around. 76 00:04:52,840 --> 00:04:57,760 But now as I move my frame currently it's being a little bit weird because we have the anchor point 77 00:04:57,760 --> 00:05:04,660 set, and just resizing or moving around things on the screen can get kind of glitchy when we're using 78 00:05:04,660 --> 00:05:09,790 automatic size, but you can basically see how it's resizing to try and hold this UI element inside 79 00:05:09,790 --> 00:05:10,270 of it. 80 00:05:10,270 --> 00:05:14,110 It's a little buggy right now, but if you use it in scripts, it'll work fine. 81 00:05:14,440 --> 00:05:19,900 If I put the anchor point back to zero zero and then I were to resize. 82 00:05:19,900 --> 00:05:22,030 As you can see, it's trying to. 83 00:05:22,880 --> 00:05:23,210 Hold on. 84 00:05:23,210 --> 00:05:26,450 Actually, let me swap the original one back to zero zero. 85 00:05:26,480 --> 00:05:28,340 Let me remove it back over here. 86 00:05:29,890 --> 00:05:31,000 And let's go ahead and try now. 87 00:05:31,000 --> 00:05:31,540 There we go. 88 00:05:31,540 --> 00:05:32,860 It's acting a little bit better. 89 00:05:32,860 --> 00:05:40,690 So as you can see, as my frame goes beyond the border, it's forcing my green frame to resize in the 90 00:05:40,690 --> 00:05:41,590 x direction. 91 00:05:41,590 --> 00:05:44,110 And we can do the exact same thing for the y direction as well. 92 00:05:44,110 --> 00:05:50,380 So if I swap this to y now, if I move this frame downwards, it's going to force my frame to resize 93 00:05:50,380 --> 00:05:51,580 in that direction. 94 00:05:52,090 --> 00:05:56,350 And then x and Y is going to do it on both the x and the y axis. 95 00:05:57,950 --> 00:06:02,360 Another property I want to go ahead and take a look at is something called the z index. 96 00:06:02,360 --> 00:06:06,320 And this determines how GUI should be displayed on the screen. 97 00:06:06,320 --> 00:06:09,560 So if I take this frame and put it inside of the GUI. 98 00:06:09,590 --> 00:06:11,090 So we have two different frames. 99 00:06:11,090 --> 00:06:14,990 Currently my yellow frame is displaying over top my green frame. 100 00:06:14,990 --> 00:06:21,350 If I want my green frame to render over my yellow frame, I need to increase its z index. 101 00:06:21,350 --> 00:06:27,890 So for example, if I set it to ten now, it's going to render over any other objects in the GUI that 102 00:06:27,890 --> 00:06:30,650 have a z index less than ten. 103 00:06:30,950 --> 00:06:37,250 If I want my yellow GUI to render over my green GUI, then I need to simply set its z index higher than 104 00:06:37,250 --> 00:06:39,650 the z index for my green GUI. 105 00:06:39,680 --> 00:06:44,870 So if I set it to 100 now, it's going to always render over my green GUI. 106 00:06:45,540 --> 00:06:49,170 Let me go ahead and duplicate this green guy and let me make a red one. 107 00:06:49,680 --> 00:06:53,490 And let's say I set this z index to be 200. 108 00:06:54,060 --> 00:06:58,290 So now what you're going to see with my yellow frame, if I can find it, let me grab it. 109 00:06:58,290 --> 00:07:03,120 Is that it's going to render over my green frame, but it's not going to render over my red frame. 110 00:07:03,120 --> 00:07:07,290 And that's because my red frame has a higher z index than the other frames. 111 00:07:07,920 --> 00:07:11,190 The last property I want to go ahead and talk about is clip descendants. 112 00:07:11,190 --> 00:07:17,550 So if I put my yellow frame back in my green frame and let's say I move my yellow frame outside of the 113 00:07:17,550 --> 00:07:21,900 bounds of my green frame, currently it's being rendered on the screen. 114 00:07:21,900 --> 00:07:25,290 And that's because we have clip descendants set to false. 115 00:07:25,290 --> 00:07:30,750 But once I enable clip descendants, you can no longer see the yellow frame because it's outside of 116 00:07:30,750 --> 00:07:34,740 the bounds of my green frame, so it's clipping all of its descendants. 117 00:07:34,740 --> 00:07:40,890 If I start to move it back inwards, let me actually go ahead and disable that. 118 00:07:40,890 --> 00:07:43,260 And let me put it like halfway. 119 00:07:43,260 --> 00:07:47,580 What you're going to see is that it's going to be cut in half because the other half is outside of the 120 00:07:47,580 --> 00:07:47,940 bounds. 121 00:07:47,940 --> 00:07:50,670 So it's not going to be rendered on the screen. 122 00:07:50,910 --> 00:07:51,270 Okay. 123 00:07:51,270 --> 00:07:53,970 Now let's go ahead and take a look at a text label. 124 00:07:53,970 --> 00:07:58,800 And a text label is literally just a frame, but it has text inside of it. 125 00:07:58,800 --> 00:08:03,480 So it has all the same properties that you would find in a frame, such as the background color, the 126 00:08:03,480 --> 00:08:09,330 transparency border color, the anchor point, the position and size, as well as z index and clip descendants. 127 00:08:09,330 --> 00:08:16,500 But we get some extra settings relating to text, so we're able to change the font of the text inside 128 00:08:16,500 --> 00:08:17,610 of our text label. 129 00:08:17,610 --> 00:08:21,420 There's a whole bunch of different fonts here, and you can even grab more from the toolbox. 130 00:08:21,510 --> 00:08:27,030 We are able to bold the text or make it italicized, and change the weight of the text as well. 131 00:08:27,030 --> 00:08:27,930 If it allows. 132 00:08:27,930 --> 00:08:32,640 For this particular font, we aren't able to change the weight, but some other fonts you are able to 133 00:08:32,640 --> 00:08:33,600 change the weight. 134 00:08:33,600 --> 00:08:40,050 We have another property here called line height which determines the vertical spacing if you have multiple 135 00:08:40,050 --> 00:08:41,700 different layers of text. 136 00:08:41,700 --> 00:08:45,690 So as an example, let me go ahead and enable text scaled. 137 00:08:45,690 --> 00:08:51,150 So that way my text scales with the size of my text label. 138 00:08:52,190 --> 00:08:54,590 And then let me just say something like, hello. 139 00:08:54,590 --> 00:08:58,760 And let me just go ahead and copy and paste this a whole bunch of different times. 140 00:08:59,370 --> 00:09:00,090 There we go. 141 00:09:00,090 --> 00:09:02,070 So we have three layers of text. 142 00:09:02,070 --> 00:09:06,660 And then by adjusting the line height we can adjust the vertical spacing between this text. 143 00:09:06,660 --> 00:09:09,840 So if I set it to zero there is no vertical line height. 144 00:09:09,840 --> 00:09:12,360 So it's just going to put the text one after the other. 145 00:09:12,360 --> 00:09:19,620 If I set it to 0.1 then we have that spacing right there and our text is pretty crushed together. 146 00:09:19,620 --> 00:09:22,890 But of course you can adjust this however you want. 147 00:09:22,890 --> 00:09:27,570 And as I slowly increase it, as you can see the text is spacing out more and more. 148 00:09:28,360 --> 00:09:30,790 And by default it's going to be set at one. 149 00:09:30,790 --> 00:09:32,590 If I want it to be spaced out even more. 150 00:09:32,620 --> 00:09:36,490 Then I can set it to 2 or 3 or whatever the case may be. 151 00:09:36,850 --> 00:09:40,060 This other property called max visible graphemes. 152 00:09:40,060 --> 00:09:45,220 The purpose of this property is to apply a typewriter effect to our text. 153 00:09:45,220 --> 00:09:50,290 So currently it's set to negative one, which indicates that it's going to display all of the text in 154 00:09:50,290 --> 00:09:51,190 the text label. 155 00:09:51,190 --> 00:09:57,670 If I set it to zero, what's going to happen is it's going to display zero characters in our text label. 156 00:09:57,670 --> 00:10:02,830 If I set it to one, it's going to actually let me go ahead and hit enter. 157 00:10:02,830 --> 00:10:07,780 If I set it to one, it's only going to display one character, because this is determining how many 158 00:10:07,780 --> 00:10:10,450 characters in the text label we're supposed to display. 159 00:10:10,480 --> 00:10:13,810 If I put ten, it's going to display ten characters. 160 00:10:13,810 --> 00:10:16,840 We have one, two, three, four, five. 161 00:10:16,840 --> 00:10:22,240 This space is also counted as a character, so six, seven, eight, nine and ten. 162 00:10:22,270 --> 00:10:25,330 If I set it to 50, it's going to display more blah blah blah. 163 00:10:25,360 --> 00:10:31,450 This is where you can script it to create a typewriter effect by gradually incrementing the amount for 164 00:10:31,450 --> 00:10:32,320 this property. 165 00:10:32,320 --> 00:10:35,980 And then if you want to display all of the text, you just set it to negative one. 166 00:10:36,610 --> 00:10:43,030 The rich text property determines whether or not this text label can support rich text formatting or 167 00:10:43,030 --> 00:10:44,620 rich text stylization. 168 00:10:44,620 --> 00:10:47,170 We're not going to go too much into depth with that. 169 00:10:47,170 --> 00:10:50,140 That's a completely different topic for another lecture. 170 00:10:50,650 --> 00:10:53,320 Now, of course, we're also able to change the color of our text. 171 00:10:53,320 --> 00:10:58,180 So if we want to make our text green, we can make it green or whatever color we want across the color 172 00:10:58,180 --> 00:10:59,050 spectrum. 173 00:10:59,050 --> 00:11:02,980 This other property called text direction, we're not going to worry about too much because it has to 174 00:11:02,980 --> 00:11:05,500 do with accessibility of text. 175 00:11:05,500 --> 00:11:10,630 And some languages, text is displayed from right to left rather than left to right. 176 00:11:10,630 --> 00:11:12,520 And that's the purpose of this property. 177 00:11:12,520 --> 00:11:17,950 You have to go and adjust another setting in the starter GUI, which is called RTL or right to left 178 00:11:17,980 --> 00:11:18,790 tech support. 179 00:11:18,790 --> 00:11:21,280 We're not going to worry about this for now. 180 00:11:21,310 --> 00:11:26,890 Of course, the other property that we just saw was text scaled, so if I disable it, our text is going 181 00:11:26,890 --> 00:11:29,470 to be equal to the text size that we have determined here. 182 00:11:29,470 --> 00:11:31,090 So if I set it to 20 it makes it larger. 183 00:11:31,090 --> 00:11:33,400 If I set it to 50 it makes it even larger. 184 00:11:33,400 --> 00:11:37,390 And then if I enable text scale, it's going to ignore the text size property. 185 00:11:37,390 --> 00:11:43,180 And the text font size is just going to scale with the size of our text label. 186 00:11:43,990 --> 00:11:47,320 We are also able to add a stroke or an outline to the text. 187 00:11:47,320 --> 00:11:52,720 So what I'm going to do is I'm going to set the stroke transparency to zero, and then we can add something 188 00:11:52,720 --> 00:11:56,140 like a green stroke around our text just like that. 189 00:11:56,380 --> 00:11:59,470 These text stroke properties are kind of deprecated. 190 00:11:59,500 --> 00:12:05,290 There is a better alternative which is called a UI stroke instance, which we're going to take a look 191 00:12:05,290 --> 00:12:06,370 at in the future. 192 00:12:06,370 --> 00:12:11,290 So I don't really recommend using the text stroke properties because it's very limited. 193 00:12:11,290 --> 00:12:16,810 It doesn't allow you to adjust the thickness of the stroke around the text. 194 00:12:16,810 --> 00:12:19,600 It only allows you to change the color and the transparency. 195 00:12:19,600 --> 00:12:23,860 If you want to be able to change the thickness of the stroke, that's what we're going to be using a 196 00:12:23,860 --> 00:12:25,330 UI stroke instance for. 197 00:12:25,330 --> 00:12:27,760 And we're going to take a look at that in a future lecture. 198 00:12:27,760 --> 00:12:29,860 But for now I'm just going to disable Lamp. 199 00:12:30,490 --> 00:12:33,970 The next property we can go ahead and take a look at is text truncate. 200 00:12:34,180 --> 00:12:40,600 And what this does, if I set it to at end and let me go ahead and disable text scaling. 201 00:12:40,600 --> 00:12:46,750 And then let me just size up my text very large and let me just decrease the size. 202 00:12:46,750 --> 00:12:51,760 What you'll notice is now there are three dots at the end of our text label. 203 00:12:51,760 --> 00:12:52,840 So that's what it does. 204 00:12:52,840 --> 00:12:58,720 It adds a couple extra dots at the end to indicate that, hey, there's extra text in this text label, 205 00:12:58,720 --> 00:13:03,130 but it's cut off because there's not enough room to display in the text label. 206 00:13:03,130 --> 00:13:08,890 So if I continue to resize, those extra words will pop up inside of the text label, and then those 207 00:13:08,890 --> 00:13:11,050 three extra dots will appear inside. 208 00:13:11,050 --> 00:13:15,310 And then if I'm able to display all the text, then those three dots disappear. 209 00:13:15,310 --> 00:13:17,680 So that's the purpose of that property. 210 00:13:18,340 --> 00:13:24,640 Text wrap, which is what we saw, allows us to wrap the text to be in layers if I have it disabled. 211 00:13:24,640 --> 00:13:29,410 As you can see, our text looks ugly and it goes off of our frame, but if we enable it now, the text 212 00:13:29,410 --> 00:13:34,840 is being properly wrapped inside of our text label, and then we have some settings for the alignment 213 00:13:34,840 --> 00:13:35,560 of our text. 214 00:13:35,560 --> 00:13:38,710 So on the x axis, do we want it to be on the left. 215 00:13:38,710 --> 00:13:40,120 We want it to be on the right. 216 00:13:40,120 --> 00:13:41,590 Do we want it to be in the center? 217 00:13:41,590 --> 00:13:44,140 And then the same thing goes with the y axis. 218 00:13:44,140 --> 00:13:47,980 We can set it to the top or the bottom or set it to the center. 219 00:13:48,710 --> 00:13:52,640 The last object we're going to take a look at is called the image label. 220 00:13:52,640 --> 00:13:55,910 And this allows us to display images on the screen. 221 00:13:55,910 --> 00:14:00,410 So this is basically another frame but with images inside of it. 222 00:14:00,410 --> 00:14:04,610 So again it has all the same properties that a regular frame would have. 223 00:14:04,610 --> 00:14:08,660 But it also has some additional properties relating to images. 224 00:14:08,660 --> 00:14:13,100 So we're able to put an ID in here to display an image on the screen. 225 00:14:13,100 --> 00:14:15,350 We can change the color of that image. 226 00:14:15,350 --> 00:14:17,690 And there's some additional settings here as well. 227 00:14:17,690 --> 00:14:22,580 So if I want to make the color of my image, let's say a dark red, then I can do that. 228 00:14:22,580 --> 00:14:27,200 Or if I want to make it white or just keep the regular color of whatever the image is, then we just 229 00:14:27,200 --> 00:14:28,130 set it to white. 230 00:14:28,130 --> 00:14:33,650 And then there's some additional settings here called image rect offset and image rect size. 231 00:14:33,650 --> 00:14:41,570 So this allows us to change the size in pixels that we would like to basically cut into our image. 232 00:14:41,570 --> 00:14:47,660 So let's say this image the resolution of this image is 512 by 512 pixels. 233 00:14:47,660 --> 00:14:51,770 Well let's say we want to zoom only into a small section of this image. 234 00:14:51,770 --> 00:14:54,980 Let's say we want to zoom in to 100 by 100 pixels. 235 00:14:54,980 --> 00:15:00,470 Well that's what we would use the rect size for if I set it to 100 by 100 pixels. 236 00:15:00,470 --> 00:15:05,990 Now we are zoomed into the image, and we can move around the position of the image by using the image 237 00:15:05,990 --> 00:15:06,920 rect offset. 238 00:15:06,920 --> 00:15:12,680 So I can move like 20 pixels along the x axis and then 50 pixels down the y axis. 239 00:15:12,680 --> 00:15:18,230 And now you can see that we're zoomed into a particular section of our image. 240 00:15:18,710 --> 00:15:22,910 So now we can see the bottom corner of this little icon here. 241 00:15:23,240 --> 00:15:28,550 The main purpose of these two properties is basically for creating animations in your images. 242 00:15:28,550 --> 00:15:34,610 So let's say you upload an image that has a set of different elements inside of it, and then you can 243 00:15:34,610 --> 00:15:40,250 shift around the position of the image to basically create the effect of an animation. 244 00:15:40,520 --> 00:15:45,440 So you would have an image with, let's say 20 different frames inside of it, and then you just shift 245 00:15:45,440 --> 00:15:51,290 around the position of the image to each one of those frames to create an animation or video kind of 246 00:15:51,290 --> 00:15:52,100 effect. 247 00:15:52,100 --> 00:15:55,520 We're also able to change the transparency of the image as well. 248 00:15:55,520 --> 00:16:00,560 So if we want our image to be completely transparent, but we want to keep our background transparency, 249 00:16:00,560 --> 00:16:01,370 we can do that. 250 00:16:01,370 --> 00:16:06,740 Or let's say we have a transparent image and we want to be able to hide the background transparency. 251 00:16:06,740 --> 00:16:08,480 We can do that as well. 252 00:16:08,480 --> 00:16:11,510 Unfortunately, this image is completely opaque. 253 00:16:11,510 --> 00:16:15,560 So actually let me reset these values back to zero so we can see the whole image. 254 00:16:15,950 --> 00:16:18,950 And then let's go ahead and grab an image from the toolbox. 255 00:16:18,950 --> 00:16:22,880 For example this image right here has a transparent background. 256 00:16:22,880 --> 00:16:27,800 So if I place it inside of it, as you can see, we're only rendering the image because the background 257 00:16:27,800 --> 00:16:29,690 transparency is set to one. 258 00:16:29,690 --> 00:16:34,670 But if I set it to zero and now we're going to have a background rendered, and then if I want the image 259 00:16:34,670 --> 00:16:37,580 to be transparent, then I can adjust that as well down here. 260 00:16:37,580 --> 00:16:38,660 And there you go. 261 00:16:38,660 --> 00:16:40,190 Our image has disappeared. 262 00:16:40,640 --> 00:16:46,220 Now this property down here called Resample Mode basically just determines how the image should look 263 00:16:46,220 --> 00:16:52,550 when it is scaled, because sometimes the image might get scaled up to a larger resolution than the 264 00:16:52,550 --> 00:16:53,810 image was originally. 265 00:16:53,810 --> 00:16:59,720 So if we set it to pixelated, what's going to happen is it's going to preserve the sharp edges of the 266 00:16:59,720 --> 00:17:01,310 pixels in the image. 267 00:17:01,310 --> 00:17:07,070 If we set it to default, what the game engine is going to try and do is it's going to try and smooth 268 00:17:07,070 --> 00:17:10,010 out those edges to look a little bit more natural on screen. 269 00:17:10,010 --> 00:17:15,560 But if you want to preserve that pixel edge, then you would set it to pixelated. 270 00:17:16,040 --> 00:17:20,090 And then the last property we can look at here is called scale type, which simply determines how the 271 00:17:20,090 --> 00:17:22,520 image should look inside of the image label. 272 00:17:22,520 --> 00:17:30,350 So if we set it to crop, then it's going to crop the image to match or try to fit into whatever the 273 00:17:30,350 --> 00:17:31,610 size of our image label is. 274 00:17:31,610 --> 00:17:37,250 So we are able to basically cut and crop the image if we set it to stretch, which is what it is by 275 00:17:37,250 --> 00:17:43,280 default, then it's going to stretch the image to try and match the size or shape of our image label. 276 00:17:43,280 --> 00:17:47,990 So now we've really squished down our guy here, but instead if we set it to cropped, it's going to 277 00:17:47,990 --> 00:17:53,630 maintain the aspect ratio of the original image, and it's just going to cut it when it can't fit inside 278 00:17:53,630 --> 00:17:54,710 of our image label. 279 00:17:54,830 --> 00:18:01,040 There's a few other in here, such as fit, so it'll scale the image down to try and fit the entire 280 00:18:01,040 --> 00:18:03,170 thing within our image label. 281 00:18:03,170 --> 00:18:07,850 Even if our image label is resized like this, it's just going to try and fit the whole image in here. 282 00:18:08,000 --> 00:18:13,880 If we set the scale type to slice, it's going to open up some additional properties that we can adjust. 283 00:18:13,880 --> 00:18:17,180 We're going to take a look at this scale type more in depth later. 284 00:18:17,180 --> 00:18:24,500 But the main purpose of this scale type is to help you adjust the aspect ratio of image labels that 285 00:18:24,500 --> 00:18:25,850 you have in your GIS. 286 00:18:25,850 --> 00:18:30,890 Because, for example, if you have an image label that's supposed to represent a background of something 287 00:18:30,890 --> 00:18:37,730 and it has like some fancy little decor on the corners, if your image label gets resized funky, sometimes 288 00:18:37,730 --> 00:18:42,020 the edges of that image label can get stretched and it will look weird. 289 00:18:42,020 --> 00:18:47,150 So what slice allows you to do is it allows you to determine different areas that are supposed to have 290 00:18:47,150 --> 00:18:47,990 different aspects. 291 00:18:48,110 --> 00:18:51,320 Ratios in your image, so that way it doesn't look distorted. 292 00:18:51,350 --> 00:18:52,970 Again, you don't need to worry about this right now. 293 00:18:52,970 --> 00:18:56,060 We're going to take a look at this more in depth in the future. 294 00:18:56,180 --> 00:19:02,330 The last one here is called tile, which as you would expect would create tiles of the image. 295 00:19:02,330 --> 00:19:08,420 So right now the tile is set to a size of one on the x and y axis for scale. 296 00:19:08,420 --> 00:19:13,130 So that means it's going to be the entire image scaling to the entire size of our image label. 297 00:19:13,130 --> 00:19:17,540 But let's say we want it to be a specific size in pixels. 298 00:19:17,540 --> 00:19:19,220 So let's say 100. 299 00:19:19,700 --> 00:19:22,460 Let me go ahead and set that to zero by 100 pixels. 300 00:19:22,460 --> 00:19:23,060 Right. 301 00:19:23,660 --> 00:19:28,460 So now what we're going to have is the image repeating over and over and over again. 302 00:19:28,460 --> 00:19:29,480 So it's a tile. 303 00:19:29,480 --> 00:19:32,930 And each one of these images is 100 by 100 pixels. 304 00:19:32,930 --> 00:19:39,920 And as I resize my image label, it's going to include more and more of the same image with that particular 305 00:19:39,920 --> 00:19:41,480 size, which is very cool. 306 00:19:42,470 --> 00:19:48,920 Okay, in the next lecture, we're going to take a closer look at position and size. 307 00:19:48,920 --> 00:19:54,650 And we're going to learn the difference between scale and offset and how that relates to the anchor 308 00:19:54,650 --> 00:19:56,750 point of a GUI object. 309 00:19:56,750 --> 00:19:58,280 So I'll see you there.